<route lang="json5" type="page">
	{
	layout: 'default',
	style: {
	navigationBarTitleText: '',
	navigationStyle: 'custom',
	disableScroll: true, // 微信禁止页面滚动
	'app-plus': {
	bounce: 'none', // 禁用 iOS 弹性效果
	},
	},
	}
</route>

<template>
	<PageLayout navTitle="个人信息" backRouteName="people" routeMethod="pushTab">
		<view class="list cu-text-grey">
			<view class="info-box">
				<template v-for="(item, index) in dataSource" :key="index">
					<view :class="['item', item.type ? item.type : '']">
						<view class="left">{{ item.label }}</view>
						<view class="right">
							<template v-if="item.type == 'avatar'">
								<wd-img width="24px" height="24px" :src="getAvater(item.value)"></wd-img>
							</template>
							<template v-else-if="item.type == 'sex'">
								{{ getSex(item.value) }}
							</template>
							<template v-else-if="item.type == 'phone'">
								{{ phone }}
							</template>
							<template v-else-if="item.type == 'email'">
								{{ email }}
							</template>
							<template v-else-if="item.type == 'identity'">
								{{ getUserIdent(item.value) }}
							</template>
							<template v-else>
								{{ item.value }}
							</template>
						</view>
					</view>
				</template>
			</view>
			<div class="option-btn" @click="handleNavRight">
				<wd-icon name="edit" size="22px"></wd-icon>
				<span>修改</span>
			</div>
		</view>
	</PageLayout>
</template>

<script lang="ts" setup>
	import { useToast, useMessage, useNotify, dayjs } from 'wot-design-uni'
	import { useRouter } from '@/plugin/uni-mini-router'
	import { useUserStore } from '@/store/user'
	import defaultAvatar from './components/avatar.vue'
	import { getFileAccessHttpUrl } from '@/common/uitls'

	defineOptions({
		name: 'userDetail',
		options: {
			styleIsolation: 'shared',
		},
	})
	const toast = useToast()
	const router = useRouter()
	const userStore = useUserStore()
	const columns = [
		{ label: '男', value: 1 },
		{ label: '女', value: 2 },
	]
	const handleNavRight = () => {
		router.push({ name: 'userEdit' })
	}
	const getSex = (val) => {
		return columns.find((item) => item.value === val)['label']
	}
	const getAvater = (avater) => {
		return getFileAccessHttpUrl(avater)
	}
	const phone = computed(() => {
		return userStore.userInfo?.phone || '';
	})
	const email = computed(() => {
		return userStore.userInfo?.email || '';
	})
	const getSubStringText = (text, len) => {
		if (!text || text.length == 0) {
			return ''
		}
		if (text.length < len) {
			return text
		}
		return text.substr(0, len) + '...'
	}
	const getUserIdent = (value) => {
		const idents = {
			0: '碳商',
			1: '普通用户',
			2: '管理员',
		}
		return idents[value]
	}
	const dataSource = ref([
		{ type: 'avatar', label: '头像', value: userStore.userInfo.avatar },
		{ label: '姓名', value: userStore.userInfo.realname },
		{ type: 'sex', label: '性别', value: userStore.userInfo.sex ?? 1 },
		{ label: '生日', value: userStore.userInfo?.birthday || '' },
		// {
		// 	type: 'showInfo',
		// 	label: '对外信息展示',
		// 	value: getSubStringText(userStore.userInfo.realname + (userStore.userInfo?.orgCodeTxt ? `@${userStore.userInfo.orgCodeTxt}` : ''), 11),
		// },
		{ label: '手机', value: phone.value, type: 'phone' },
		{ label: '邮箱', value: email.value, type: 'email' },
		{ label: '所属碳商', value: userStore.userInfo.userIdentity, type: 'identity' },
	])
</script>

<style lang="scss" scoped>
	//
	.list {
		display: flex;
		height: 100%;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #FFF;
		padding: 26upx;
		color: #000;
		z-index: 999;

		.info-box {
			width: 100%;
			box-sizing: border-box;
			padding: 0 20upx;
			border: 4upx solid #eff2f1;
			border-radius: 20upx;
		}

		.option-btn {
			margin-top: 26upx;
			border-radius: 18upx;
			height: 96upx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28upx;
			color: #FFF;
			background-color: #2fd4ae;
		}

		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;
			line-height: 24px;
			padding: 14px 15px;
			position: relative;

			&::before {
				position: absolute;
				top: 0;
				left: 0;
				box-sizing: border-box;
				width: 200%;
				height: 200%;
				border-bottom: 1px solid #ddd;
				border-radius: inherit;
				content: ' ';
				-webkit-transform: scale(0.5);
				transform: scale(0.5);
				-webkit-transform-origin: 0 0;
				transform-origin: 0 0;
				pointer-events: none;
			}

			&.showInfo {
				margin: 15px 0;
			}
		}

		.left {
			width: 30%;
			font-size: 15px;
		}

		.right {
			width: 50%;
			font-size: 14px;
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
	}
</style>